<template>
  <div class="ui-header">
    <div @click="back" class="header-button">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-left"></use>
      </svg>
    </div>
    <div class="header-title">{{headertit}}</div>
    <div class="right">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      headertit: {
        type: String,
        required: true
      }
    },
    methods: {
      back() {
        this.$router.go(-1); //返回上一层
      }
    }
  }
</script>

<style scoped>
  /**
   * header
   */
  .ui-header {
    color: #555555;
    position: fixed;
    top: 0;
    padding: 0 .88rem;
    width: 100%;
    height: .8rem;
    box-shadow: -3px 0 2px rgba(0, 0, 0, .2);
    font-size: .28rem;
    background: #ffffff;
    z-index: 10;
  }

  .header-title {
    text-align: center;
    line-height: .8rem;
    font-size: .32rem;
  }

  .header-button {
    position: absolute;
    display: flex;
    left: .24rem;
    align-items: center;
    justify-content: center;
    width: .45rem;
    height: .45rem;
    font-size: .875rem;
    top: calc(50% - .2rem);
  }

  .ui-header .header-button .icon {
    width: .36rem;
    height: .36rem;
  }

  .right{
    height: .8rem;
    width: .88rem;
    position: absolute;
    right: 0;
    top: 0;
    line-height: .8rem;
    display: inline-block;
  }

</style>
